 
<html>
<head>
	<meta charset="UTF-8">
	<title>电影</title>
	<style>
	#send-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  background:#06AD97;
  border: 0;
  border-radius: 5px;
  padding: 10px 30px 10px 20px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

button svg {
  display: inline-block;
  vertical-align: middle;
  padding-right: 5px;
}

button:hover svg {
  animation: fly 2s ease 1;
}

@keyframes fly {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(300%);
  }

  100% {
    transform: translateX(0);
  }
}
	body{ background-color:#EFEFEF;}
	.lanren{width:1000px;overflow:hidden;margin:0 auto;}
	.flip-3d { 
	  perspective: 1200px; width: 33%; float: left;  
	}
	.flip-3d figure { 
	  position: relative; 
	  transform-style: preserve-3d; 
	  transition: 1s transform;
	  font-size: 1.6rem;
	  margin:25px;
	}
	.flip-3d figure img { 
	  width: 100%; height: auto; 
	}
	.flip-3d figure figcaption { 
	  position: absolute; 
	  width: 100%; height: 100%; top: 0; 
	  transform: rotateY(.5turn) translateZ(1px); 
	  background: rgba(255,255,255,0.9); 
	  text-align: center; 
	  padding-top: 45%; 
	  opacity: 0.6; 
	  transition: 1s .5s opacity; 
	}
	.flip-3d:hover figure { transform: rotateY(.5turn); }
	.flip-3d:hover figure figcaption { opacity: 1; }
	.flip-3d figure:after { 
	  content: " "; display: block;
	  height: 8vw; width: 100%; 
	  transform: rotateX(90deg); 
	  background-image:radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); 
	}
	@media screen and (max-width: 800px) { 
	  #flip-3d { perspective-origin: center top; }
		div#flip-3d figure { 
	    float: none; 
	    width: 50%; 
	    margin: 0 auto; 
	    margin-bottom: 12vw; 
	  }
	 .flip-3d figure figcaption{font-size: 0.8rem;}
		div#flip-3d figure:last-child { display: none; }
	}
	</style>
	 
</head>
<body>
	 
	<div class="lanren">
		<div class="flip-3d">
		 	<figure>
		    	<img src="images/寻梦环游记.jpg"  >
		    	<figcaption>寻梦环游记</figcaption>
			</figure>
		</div>
		<div class="flip-3d">
			<figure>
		    	<img src="images/触不可及.jpg" >
		    	<figcaption>触不可及</figcaption>
		  	</figure>
		</div>
		<div class="flip-3d">
			<figure>
		    	<img src="images/怦然心动.jpg" >
		    	<figcaption>怦然心动</figcaption>
			</figure>
		</div>
	</div>
 
	   <div id="send-btn">
  <button>
    
   <a href="../主页.html"> 返回</a>
  </button>
</div>
</body>
</html>